import { useState } from "react"
import MyComponents from "./components/MyComponents"
import SyntaxHighlighter from '@/components/SyntaxHighlighter'

const code = `
  export default React.memo(function MyComponents({ value }) {
    alert('Render:', value)
  
    return (
      <div>
        { value }
  
        <SyntaxHighlighter children={code} />
      </div>
    )
  }, (prevProps, nextProps) => prevProps.value === nextProps.value)
`

function ReactMemo() {
  const [value] = useState(1)
  const [count, setCount] = useState(1)

  return (
    <div>
      <h1>如何通过 React.memo 优化函数组件性能？</h1>
      <p>React.memo 是一个高阶组件（HOC），用于优化函数组件的性能。当组件的 props 没有变化时，React.memo 会阻止组件的重新渲染，从而提高渲染性能。</p>

      <h3>使用 React.memo</h3>
      <p>React.memo 可以用来包装一个函数组件，只要该组件的 props 没有变化，就会跳过重新渲染。</p>
    
      <MyComponents value={value} />

      <p>count: { count }</p>
      <button onClick={() => setCount(count + 1)}>改变count不会重新渲染子组件</button>
    
      <p>1. React.memo 会对组件的 props 做浅比较，只有当 props 发生变化时，组件才会重新渲染。</p>
      <p>2. 如果 props 是对象或数组类型且发生了变化，React 会认为它们是新对象，因此组件会重新渲染。</p>

      <h3>适用场景：</h3>
      <p>1. 当组件接收的数据不频繁变化时，尤其时大量数据渲染时，使用 React.memo 可以显著减少渲染次数，提高性能。</p>

      <h3>自定义比较函数：</h3>
      <p>你还可以通过传递一个自定义的比较函数来控制是否跳过渲染：</p>
      <SyntaxHighlighter children={code} />
    </div>
  )
}

export default ReactMemo